<style scoped>
  .companyWarehouseQuery{
    margin-right: 15px;
    padding: 0 15px;
    background-color: white;
    height: 87.5vh;
    position: relative;
  }
  .cwq-top{
    padding: 15px 0;
    border-bottom: 2px solid #f4f4f4;
  }
  .cwq-top div{
    display: flex;
  }
  .cwq-top p:first-child{
    margin: 3px 6px 0 0;
    display: inline-block;
    /* width: 70px; */
    white-space:nowrap;
    /* text-align: end; */
  }
  .cwq-top p:not(:first-child){
    margin: 3px 6px 0 12px;
    display: inline-block;
    white-space:nowrap;
  }
  .wd{
    width: 160px;
  }
  .cwq-btn{
    padding: 15px 15px;
    display: flex;
    justify-content: space-between;
  }
  .cwq-tab{
    display: flex;
  }
  .tab-left{
    width: 35%;
    padding-right:5px;
    border-right: 2px solid #f4f4f4;
  }
  .tab-right{
    width: 65%;
    padding-left: 5px;
  }

</style>

<style>
  .companyWarehouseQuery .cwq-top .el-input__inner,.companyWarehouseQuery .cwq-btn .el-input__inner{
    height: 30px;
  }
  .companyWarehouseQuery .cwq-top .el-date-editor .el-range__icon{
    line-height: 23px;
  }
  .companyWarehouseQuery .cwq-top .el-date-editor .el-range-separator{
    width: 8%;
    line-height: 23px;
  }
  .companyWarehouseQuery .cwq-btn .el-checkbox.is-bordered{
    padding: 5px 20px 9px 10px;
    height: 30px;
  }
</style>

<template>
  <div class="companyWarehouseQuery">
    <div class="cwq-top">
      <div>
      <p>日期</p>
      <el-date-picker
        unlink-panels
        v-model="timeData"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

        <p>货号</p>
        <el-input class="wd"></el-input>

        <p>单据序号</p>
        <el-input class="wd"></el-input>

        <p>品牌</p>
        <el-select class="wd">
          <el-option
            v-for="item in warehouseNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <p>季度</p>
        <el-select class="wd">
          <el-option
            v-for="item in warehouseNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>

    </div>

    <div class="cwq-btn">
      <div>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button icon="el-icon-box">验收入库</el-button>
      </div>
      <div>
        <el-select v-model="az" style="width:90px;margin-right:10px" @change="Change">
          <el-option
            v-for="item in List"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-checkbox v-model="checked" border>二维</el-checkbox>
      </div>
    </div>

    <div class="cwq-tab">
      <div class="tab-left">
        <el-table
            id="tip1"
            show-summary
            :data="aList"
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
            :cell-style="{padding:0,height:'36px'}">
            <template v-for="i in bList" >
              <el-table-column
                :prop="i.prop"
                :label="i.label"
                :width="i.width"
                :key="i.prop+Math.random()">
              </el-table-column>
            </template>
          </el-table>
      </div>

      <div class="tab-right">
        <el-table
            id="tip1"
            :data="cList"
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
            :cell-style="{padding:0,height:'36px'}">
            <template v-for="i in eList" >
              <el-table-column
                :prop="i.prop"
                :label="i.label"
                :width="i.width"
                :key="i.prop+Math.random()">
              </el-table-column>
            </template>
          </el-table>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name:'company_warehouse_query',
  created(){
    this.bList = this.bList1
    this.eList = this.eList1
  },
  data(){
    return{
      bList:[],
      checked:false,
      az:'出货',
      List:[
        {value:'全部',label:'全部'},
        {value:'出货',label:'出货'},
        {value:'退货',label:'退货'}
      ],
      bList1:[
        {prop:'',label:'类型'},
        {prop:'',label:'单据序号'},
        {prop:'',label:'日期'},
        {prop:'',label:'数量'},
        {prop:'',label:'金额'},
      ],
      // bList2:[
      //   {prop:'',label:'客户编号'},
      //   {prop:'',label:'专柜名'},
      //   {prop:'',label:'进'},
      //   {prop:'',label:'退'},
      //   {prop:'',label:'销'},
      //   {prop:'',label:'客存'}
      // ],
      eList:[],
      eList1:[
        {prop:'',label:'类型'},
        {prop:'',label:'单据序号'},
        {prop:'',label:'日期'},
        {prop:'',label:'货号'},
        {prop:'',label:'数量'},
        {prop:'',label:'单价'},
        {prop:'',label:'金额'},
      ],
      eList2:[
        {prop:'',label:'货号'},
        {prop:'',label:'颜色'},
        {prop:'',label:'05-XS'},
        {prop:'',label:'07-S'},
        {prop:'',label:'09-M'},
        {prop:'',label:'11-L'},
        {prop:'',label:'13-XL'},
        {prop:'',label:'15-2L'},
        {prop:'',label:'17-3L'},
        {prop:'',label:'19-4L'},
        {prop:'',label:'21-5L'},
        {prop:'',label:'D'},
        {prop:'',label:'小计'},
        {prop:'',label:'售价金额'},
        {prop:'',label:'品牌'},
      ]
    }
  },
  methods:{
    Change(){
      // if(this.az == '货'){
      //   this.bList = this.bList1
      // }else if(this.az == '客存'){
      //   this.bList = this.bList2
      //   this.eList = this.bList2
      // }
    }
  },
  watch:{
    checked(a,b){
      if(this.az == '出货' && a){
        this.eList = this.eList2
      }else if(this.az == '出货' && !a){
        this.eList = this.eList1
      }
      // if(this.az == '客存' && a){
      //   this.eList = this.eList2
      // }else if(this.az == '客存' && !a){
      //   this.eList = this.bList2
      // }
    }
  },
}
</script>